<template>

  <div ref="provinceName" id="provinceName">
  </div>
</template>

<script>
import * as THREE from "three";
import * as d3 from 'd3';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import chinaJson from "../../assets/china.json"
import {onMounted, ref} from 'vue'

/**
 * 创建场景对象Scene
 */
var scene = new THREE.Scene();
var intersectsArr = []

//星空背景
var cloud = cloudFun()
scene.add(cloud)

function cloudFun() {
  var geom = new THREE.Geometry();
  var material = new THREE.ParticleBasicMaterial({
    size: 2,
    vertexColors: true
  });
  var n = 1200;
  for (var i = 0; i < 3000; i++) {
    var particle = new THREE.Vector3(
        (Math.random() - 0.5) * n,
        (Math.random() - 0.5) * n,
        (Math.random() - 0.5) * n
    );
    geom.vertices.push(particle);
    let color_k = Math.random();
    geom.colors.push(new THREE.Color(color_k, color_k, color_k * 2.0));
  }
  var cloud = new THREE.ParticleSystem(geom, material);
  return cloud;
}

/**
 * 透视投影相机设置
 */
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
/**透视投影相机对象*/
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(651, 613, 525); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)


/**
 * 光源设置
 */
    //点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(800, 200, 300);
scene.add(point);
// 点光源2  位置和point关于原点对称
var point2 = new THREE.PointLight(0xffffff);
point2.position.set(0, -500, 0); //点光源位置
scene.add(point2); //点光源添加到场景中

//环境光
var ambient = new THREE.AmbientLight(0x000000);
scene.add(ambient);

/**
 * 创建渲染器对象
 */
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(width, height); //设置渲染区域尺寸
renderer.setClearColor(0x101010, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

let clock = new THREE.Clock();
var FPS = 30;
var refreshTime = 1 / FPS;
var timeS = 0;
function render() {

  var renderInterval = clock.getDelta();
  timeS = timeS + renderInterval;
  if (timeS > refreshTime) {
    //执行渲染操作
    renderer.render(scene, camera);
    timeS = 0;
  }
  //每次渲染位置变化，动态效果
  cloud.rotation.x += 0.0002;
  cloud.rotation.y += 0.0002;
  cloud.rotation.z += 0.0002;
  //周期性渲染
  requestAnimationFrame(render);
}

render();
var controls = new THREE.OrbitControls(camera);//创建控件对象
</script>
<style scoped>
#provinceName {
  position: absolute;
  z-index: 2;
  background: white;
  padding: 10px;
  border-radius: 2px;
  visibility: hidden;
}
</style>